let smallBOX = document.querySelector(".smallBox");//小图盒子
let mask = document.querySelector(".mask");//遮罩层
let bigBox = document.querySelector(".bigBox");//放大图盒子
let bigBoxImg = document.querySelector(".bigBox_img");//大图图片

//遮罩层和放大图片的显示和隐藏
smallBOX.addEventListener("mouseenter",function(){
  mask.style.display = "block";
  bigBox.style.display = "block";
})

smallBOX.addEventListener("mouseleave",function(){
  mask.style.display = "none";
  bigBox.style.display = "none";
})

smallBOX.addEventListener("mousemove",function(e){
  //获取遮罩层的坐标并让鼠标跟随居中
  let maskLeft = e.pageX - smallBOX.offsetLeft - mask.offsetWidth/2;
  let maskTop = e.pageY - smallBOX.offsetTop - mask.offsetHeight/2;
  
  // 获取遮罩层的最大移动距离
  let maskMaxLeft = smallBOX.offsetWidth - mask.offsetWidth;
  let maskMaxTop = smallBOX.offsetHeight - mask.offsetHeight;
  
  //设置边界值,当坐标值小于0时，坐标赋值0，不能越过左上边界
  // 当坐标值小于最大移动距离时，坐标不变
  // 当坐标值大于最大移动距离时，最大移动距离赋值给坐标值，防止越过右下边界
  maskLeft = maskLeft<0?0:maskLeft<maskMaxLeft?maskLeft:maskMaxLeft;
  maskTop = maskTop<0?0:maskTop<maskMaxTop?maskTop:maskMaxTop;

  //给坐标值增加像素单位
  mask.style.left = maskLeft+"px";
  mask.style.top = maskTop+"px";

  //获取大图图片的最大移动距离
  let bigBoxImgMaxLeft = bigBoxImg.offsetWidth - bigBox.offsetWidth;
  let bigBoxImgMaxTop = bigBoxImg.offsetHeight - bigBox.offsetHeight;
  
  //设置大图图片和遮罩层同等比例反方向移动
  bigBoxImg.style.left = -(maskLeft/maskMaxLeft*bigBoxImgMaxLeft)+"px";
  bigBoxImg.style.top = -(maskTop/maskMaxTop*bigBoxImgMaxTop)+"px";
})



